<!--webpack依赖于Node.js  在使用之前需要先安装Node     Node自带一个工具叫Npm  -->
<!--使用命令行CD到项目目录   --save-dev指的是生产环境    -->
<!--根据项目安装局部webpack开发时依赖   使用命令npm install webpack --save-dev
来安装开发环境的webpack  并在webpack.config.js中定义环境module.exports={   mode: 'development',}   -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////-->
<!--指定打包入口和出口-->
<!--在module.exports中指定入口和出口文件    入口是 entry:'./src/main.js',-->
<!--出口是： output:{
其中的path要求必须是绝对路径   所以使用const path = require('path')来引入Node自带的path
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
    },-->
<!--并在package.json的scripts中写入要绑定的快捷语句 -->
<!--"scripts": {-->
<!--"build": "webpack"-->
<!--},-->
<!--以后只需要执行npm run build就能实现webpack的打包    运行时会首先在项目本地查找命令   再去全局查找-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////-->
<!--由于webpack不能自动打包CSS文件   需要引入一个css-loader  -->
<!--使用npm install --save-dev style-loader 来安装style-loader-->
<!--使用npm install --save-dev css-loader 来安装css-loader-->
<!--webpack在使用多个Loader的时候，是从又向左读取的  所以需要把css-loader放在右边-->
<!-- module: {
        rules: [
            {
                test: /\.css$/,
                //CSS-loader只负责将CSS文件进行加载    style-loader把CSS插入到DOM中    CSS-loader和style-loader需要配合使用
                //webpack在使用多个Loader的时候，是从又向左读取的  所以需要把css-loader放在右边
                use: ['style-loader',"css-loader"],
            },
        ],
    },-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////-->
<!--webpack并不会把ES6的语法转成ES5，但是如果不进行转化，浏览器有可能就不认识ES6 ，就跑不起来，这时就需要使用babel来讲ES6转成ES5-->
<!--使用npm install -D babel-loader @babel/core @babel/preset-env webpack-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<script src="./dist/bundle.js"></script>
</body>
</html>